<!-- 菜单栏 -->
<template>
  <div class="menu-container">
    <h2 class="mb-2">宿舍管理系统</h2>
    <el-menu
      active-text-color="#409EFF"
      background-color="#304156"
      class="el-menu-vertical-demo"
      text-color="#b4b8bc"
      :default-active="selectSignRef.sign"
    >
      <Menu :list="readRenderingMenu" @handleSign="handleSign"></Menu>
    </el-menu>
  </div>
</template>
  
  <script setup>
import Menu from "./Menu.vue";
import {useRouter} from "vue-router"
import { useMenuStore } from "@/store/useMenuStore.js";
import { storeToRefs } from "pinia";
import { watchEffect } from "vue";
const router = useRouter()
const { readRenderingMenu,selectSignRef } = storeToRefs(useMenuStore()); // 菜单栏仓库数据
const {getReactiveSelect} = useMenuStore()
watchEffect(() =>{
  router.push({
    name: selectSignRef.value.path
  })
})

const handleSign = (data) => {
  if(data.children){
    return
  }
  getReactiveSelect(data)
  router.push({
    name:data.path
  })
};
</script>
  <style lang="less" scoped>
@import "@/styles/var.less";
.menu-container {
  width: 250px;
  height: 100%;
  overflow: auto;
  .mb-2 {
      min-height: 60px;
      line-height: 60px;
      width: 100%;
      background-color: #2b2f3a;
      color: #fff;
      text-align: center;
    }
  .el-menu-vertical-demo {
    min-height: calc(100% - 60px);
    width: 100%;

    span {
      font-size: 1.2em;
    }
    
  }
  ::v-deep .el-menu--inline {
    background-color: #1f2d3d;
  }
}
</style>